<template>
  <div class="comment-item">
    <div class="comment-time">{{formatTime}}</div>
    <img class="avatar" :src="item.user_pic_url?item.user_pic_url:'https://img.meituan.net/avatar/6554491534bcf265a22e6570688da6f712098.jpg'" />
    <div class="item-right">
      <p class="nickname">{{item.user_name}}</p>
      <div class="star-and-time">
        <div class="star-content"><StarScore :score="item.order_comment_score" /></div>
        <div class="send-time">{{item.ship_time + '分钟送达'}}</div>
      </div>
      <div class="comment-text">{{item.comment}}</div>
      <div class="img-content clearfix">
        <div  class='img-item' :style="{ backgroundImage: 'url(' + img.url + ')'}" v-for="img in item.comment_pics">
        </div>
      </div>
      <div class="like-info" v-if="item.praise_food_tip">{{item.praise_food_tip}}</div>

      <div class="tag-info" v-if="item.comment_labels.length">
        <template v-for="(content,i) in item.comment_labels " v-if="i!=item.comment_labels.length-1">
          {{content.content}},
        </template>
        <template v-else>
          {{content.content}}
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import  StarScore from "@/components/common/StarScore"
  export default {
    name: 'ListItem',
    computed: {
      formatTime(){
          let date = new Date(Number(this.item.comment_time + '000'));
          return date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate();
      }
    },
    components:{
      StarScore
    },
    props:['item']
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'

  .comment-item {
    display: flex;
    padding: (0.3rem) (0.3rem) (0.24rem) (0.3rem);
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    margin-bottom:0.2rem;
    .comment-time {
      position: absolute;
      right: 0.4rem;
      top:  0.4rem;
      color: #898989;
      font-size: (12px);
    }
    .avatar {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
    }
    .nickname {
      color: #2f2f2f;
      font-size: (16px);
    }
    .item-right {
      flex: 1;
      margin-left:0.4rem;
    }
    .star-and-time {
      margin-top: 0.12rem
      display: flex;
    }
    .send-time {
      color: #898989;
      font-size: (12px);
      margin-left: 0.2rem
    }
    .comment-text {
      margin-top:0.12rem;
      font-size: (14px);
      line-height: 0.38rem;
    }
    .img-item {
      display: block;
      float: left;
      width: 1.6rem;
      height: 1.6rem;
      background-size: cover;
      background-position: center center;
      margin-right: (5px);
    }
    .img-content {
      margin-top: 0.16rem;
    }
    .like-info {
      margin-top: 0.08rem;
      color: #576b95;
      font-size: (12px);
      line-height: 0.36rem;
      background-image: url('/app2/img/favor.png');
      background-repeat: no-repeat;
      background-position: left 1px;
      background-size:0.24rem 0.24rem;
      padding-left: 0.4rem;
    }
    .tag-info {
      margin-top: 0.08rem;
      color: #898989;
      font-size: (12px);
      line-height:0.36rem;
      background-image: url('/app2/img/tag.png');
      background-repeat: no-repeat;
      background-position: left 1px;
      background-size: 0.24rem 0.24rem
      padding-left: 0.4rem
    }
  }

</style>
